<template>
	<div>
		<template v-if="detail">
			<img :src="detail.url" style="width: 100%;" />
			<h3>{{ detail.title }}</h3>
			<p>{{ detail.auther }}---{{ detail.createTime }}</p>
		</template>
	</div>
</template>


<script lang="ts" setup>
import { fetchListDetail } from '@/api'
import { onMounted, ref } from 'vue';
import { Notify } from 'vant';
import { useRoute } from 'vue-router';
import { ListItem } from '@/interfaces'
import { useStore } from 'vuex';
const store = useStore()
const route = useRoute()
const id = route.params.id as string

const detail = ref<ListItem | null>(null)

onMounted(() => {
	fetchListDetail({ id }).then(resp => {
		const { code, data } = resp.data
		if (code === 200) {
			detail.value = data
			store.commit('addListHistory', detail.value)
		} else {
			Notify({ type: 'danger', message: '该商品已经下架!!!!!' })
		}
	})
})
</script> 